<template>
	<view class="search" :style="{backgroundColor: bgColor, borderRadius:borderRadius}">
		<u-search :placeholder="placeholder" shape="shape" :bgColor="'none'" :color="color"
		v-model="search" :clearabled="true" placeholderColor="#c8c9cc" 
			:showAction="false" @change="searchConfirm()"></u-search>
	</view>
</template>
		<!--  searchIconColor="#c8c9cc" bgColor="rgba(0,0,0,0.2)" -->
<script>
	export default {
		name: "Search",
		props: {
			// 设置延迟获取数据时间(防抖)
			searchTimeOut: {
				type: Number,
				default: 1000
			},
			color: {
				type: String,
				default: "#333333"
			},
			bgColor:{
				type: String,
				default: "#fff"
			},
			borderRadius:{
				type: String,
				default: '8rpx'
			},
			placeholder: {
				type: String,
				default: '输入关键词搜索'
			}
			
			
		},
		data() {
			return {
				search: '',
				timer: null
			};
		},
		methods: {
			//  搜索框
			searchConfirm() {
				if (this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {
					this.$emit('searchVal', this.search);
				}, this.searchTimeOut)
			},
		}
	}
</script>

<style lang="scss">
.search{
	width: 100%;
	// background-color: transparent;
	// border-radius: 8rpx;
}
</style>
